
var hwttlChart;
var returnHwttlData = [];

var hwttlObj = new Vue({
	el: '#hwttlTab',
	data: {
		year : '',
		isAll: false,
		zsList:{
			hwttl: true,
			jzxttl: false,
			wxhw: false
		},
		tbList: {
			hwttltb: true,
			jzxttltb: false,
			wxhwtb: false
		},
		hbList: {
			hwttlhb: true,
			jzxttlhb: false,
			wxhwhb: false
		}
	},
	created: function(){


	},
	watch:{
		"zsList.hwttl":function(val, oldVal){	//货物吞吐量
    		hwttlChart.setOption(subStrOptionHwttl(returnHwttlData),true)
		},
		"zsList.jzxttl":function(val, oldVal){	//集装箱吞吐量
    		hwttlChart.setOption(subStrOptionHwttl(returnHwttlData),true)
		},
		"zsList.wxhw":function(val, oldVal){	//船舶运载危险货物
    		hwttlChart.setOption(subStrOptionHwttl(returnHwttlData),true)
		},
		"tbList.hwttltb":function(val, oldVal){	//货物吞吐量同比
    		hwttlChart.setOption(subStrOptionHwttl(returnHwttlData),true)
		},
		"tbList.jzxttltb":function(val, oldVal){	//集装箱吞吐量同比
    		hwttlChart.setOption(subStrOptionHwttl(returnHwttlData),true)
		},
		"tbList.wxhwtb":function(val, oldVal){	//船舶运载危险货物同比
    		hwttlChart.setOption(subStrOptionHwttl(returnHwttlData),true)
		},
		"hbList.hwttlhb":function(val, oldVal){	//货物吞吐量环比
    		hwttlChart.setOption(subStrOptionHwttl(returnHwttlData),true)
		},
		"hbList.jzxttlhb":function(val, oldVal){	//集装箱吞吐量环比
    		hwttlChart.setOption(subStrOptionHwttl(returnHwttlData),true)
		},
		"hbList.wxhwhb":function(val, oldVal){	//船舶运载危险货物环比
    		hwttlChart.setOption(subStrOptionHwttl(returnHwttlData),true)
		}
	},
	methods:{
		checkAll: function(){
			this.zsList.hwttl = this.isAll;
			this.zsList.jzxttl　= this.isAll;
			this.zsList.wxhw　= this.isAll;
			
			this.tbList.hwttltb　= this.isAll;
			this.tbList.jzxttltb　= this.isAll;
			this.tbList.wxhwtb　= this.isAll;
			
			this.hbList.yslkhb　= this.isAll;
			this.hbList.jzxttlhb　= this.isAll;
			this.hbList.wxhwhb　= this.isAll;

    		hwttlChart.setOption(subStrOptionHwttl(returnHwttlData),true)
		}
	}
})


function bindHwttlData(){
	if(returnHwttlData.length == 0){

		hwttlObj.year = new Date().getFullYear();
		
		$.ajax({ 
			type: "POST",
			url: "/tszt/findsjfb.jspx", 
			data: {channelIds: 367, year: hwttlObj.year, orderBy: 36},
			success: function(data){
				if(data.code == 200)
					returnHwttlData = data.body;
	
				bindHwttl(returnHwttlData);//运输旅客总数初始化
	      	}
		});
	}
}

function subStrLegendHwttl(){
	var legend = [];

	if(hwttlObj.zsList.hwttl)
		legend.push('货物吞吐量');
    if(hwttlObj.zsList.jzxttl)
		legend.push('集装箱吞吐量');
    if(hwttlObj.zsList.wxhw)
		legend.push('船舶运载危险货物');
	return legend;
}

function subStrXAxisHwttl(returnHwttlData){
	var xAxis = [];
	
	returnHwttlData.forEach(function(month){ 
		xAxis.push(month.attr_month + '月份');
	}); 
	
	return xAxis;
}


function subStrSeriesHwttl(returnHwttlData){
	var series = [];

	var hwttlData = [];
	var hwttlDataTb = [];
	var hwttlDataHb = [];

	var jzxttlData = [];
	var jzxttlDataTb = [];
	var jzxttlDataHb = [];

	var wxhwData = [];
	var wxhwDataTb = [];
	var wxhwDataHb = [];


	returnHwttlData.forEach(function(val){ 
		//货物吞吐量
		hwttlData.push(val.attr_hwttl); //总数
		hwttlDataTb.push(val.attr_hwttltb);	//同比
		hwttlDataHb.push(val.attr_hwttlhb);//环比
		//集装箱吞吐量
		jzxttlData.push(val.attr_jzxttl); //总数
		jzxttlDataTb.push(val.attr_jzxttltb);	//同比
		jzxttlDataHb.push(val.attr_jzxttlhb);//环比
		//船舶运载危险货物
		wxhwData.push(val.attr_wxhw); //总数
		wxhwDataTb.push(val.attr_wxhwtb);	//同比
		wxhwDataHb.push(val.attr_wxhwhb);//环比
	}); 
	

	if(hwttlObj.zsList.hwttl){	//货物吞吐量
	    var d = 
		{
            name: '货物吞吐量',
            type: 'bar',
            itemStyle: {
                normal: {
					color: "#5bc0de",
                    label: {
                        show: false,
                        position: 'top',
                        formatter: '{b}\n{c}'
                    }
                }
            },
            data: hwttlData
        };
	    series.push(d);
	}

	if(hwttlObj.tbList.hwttltb){	//货物吞吐量同比
		var d = 
      	{
             name: '货物吞吐量',
             type: 'line',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
					 color: "#FF3333",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: hwttlDataTb
        };

	    series.push(d);
	}


	if(hwttlObj.hbList.hwttlhb){	//货物吞吐量环比
		var d = 
      	{
             name: '货物吞吐量',
             type: 'scatter',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#339900",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: hwttlDataHb
        };

	    series.push(d);
	}


	if(hwttlObj.zsList.jzxttl){	//集装箱吞吐量
	    var d = 
		{
            name: '集装箱吞吐量',
            type: 'bar',
            itemStyle: {
                normal: {
					color: "#0066CC",
                    label: {
                        show: false,
                        position: 'top',
                        formatter: '{b}\n{c}'
                    }
                }
            },
            data: jzxttlData
        };
	    series.push(d);
	}

	if(hwttlObj.tbList.jzxttltb){	//集装箱吞吐量同比
		var d = 
      	{
             name: '集装箱吞吐量',
             type: 'line',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#FF0000",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: jzxttlDataTb
        };

	    series.push(d);
	}


	if(hwttlObj.hbList.jzxttlhb){	//集装箱吞吐量环比
		var d = 
      	{
             name: '集装箱吞吐量',
             type: 'scatter',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#FF33CC",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: jzxttlDataHb
        };

	    series.push(d);
	}

	if(hwttlObj.zsList.wxhw){	//船舶运载危险货物
	    var d = 
		{
            name: '船舶运载危险货物',
            type: 'bar',
            itemStyle: {
                normal: {
					color: "#0000FF",
                    label: {
                        show: false,
                        position: 'top',
                        formatter: '{b}\n{c}'
                    }
                }
            },
            data: wxhwData
        };
	    series.push(d);
	}

	if(hwttlObj.tbList.wxhwtb){	//船舶运载危险货物同比
		var d = 
      	{
             name: '船舶运载危险货物',
             type: 'line',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#FF3300",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: wxhwDataTb
        };

	    series.push(d);
	}


	if(hwttlObj.hbList.wxhwhb){	//船舶运载危险货物环比
		var d = 
      	{
             name: '船舶运载危险货物',
             type: 'scatter',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#003300",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: wxhwDataHb
        };

	    series.push(d);
	}

	return series;
}

function subStrOptionHwttl(){

	var legendData = subStrLegendHwttl();
	var xAxisData = subStrXAxisHwttl(returnHwttlData);
	var seriesData = subStrSeriesHwttl(returnHwttlData);

    var option = {
       
    		title: {
    			text: hwttlObj.year + '年'
    		},	
    		
            tooltip: {},

            legend: {
                data: legendData,
                textStyle: {
                    color: '#A7A7A7',
                },
            },
          
            xAxis: {
                data: xAxisData
            },
            
            yAxis: [
            	{
                    type: 'value',
                    name: '总数（人次）'
                },
                {
                    type: 'value',
                    name: '百分比%'
                }
            ],
        
           series: seriesData
		};
    
    
    return option;
}


//运输旅客总数图表初始化
function bindHwttl(returnHwttlData){

	hwttlChart = echarts.init(document.getElementById('chartHwttl'));

    var option = subStrOptionHwttl(returnHwttlData);
	
    // 使用刚指定的配置项和数据显示图表。
    hwttlChart.setOption(option);
}